<template>
  <el-collapse v-model="activeNames" class="box-card" accordion>
    <!-- 搜索框 -->
    <el-input
      v-model="searchText"
      placeholder="搜索..."
      @input="handleSearch"
      class="search-input"
    />
    <!-- 折叠面板 -->
    <el-collapse-item
      v-for="item in filteredItems"
      :key="item.id"
      :name="item.id"
      :title="item.content + ' - ' + item.name"
    >
      <!-- 折叠内容 -->
      <ul class="item-list">
        <li
          v-for="option in itemOptions"
          :key="option.value"
          class="list-item"
          @click="handleItemClick(item, option)"
        >
          {{ option.label }}
        </li>
      </ul>
    </el-collapse-item>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <el-button type="primary" :disabled="noMore" @click="loadMore" class="load-more-btn">加载更多</el-button>
  </el-collapse>
</template>

<script>
export default {
  name: 'SumReport',
  data() {
    return {
      activeNames: [], // 控制折叠面板的展开项
      pageSize: 5,
      page: 1,
      loading: false,
      error: null,
      items: [],
      selectedItem: null,
      searchText: '',
      itemOptions: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
        // ...更多选项...
      ],
      filteredItems: []
    }
  },
  computed: {
    noMore() {
      return this.items.length >= 1000
    }
  },
  mounted() {
    this.loadMore()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleItemClick(item) {
      // 处理点击事件，例如可以设置选中状态或者执行其他逻辑
      this.selectedItem = item
      // 这里可以添加其他逻辑，比如弹出模态框或者更新数据等
    },
    handleSearch() {
      this.filteredItems = this.items.filter(item =>
        item.content.toLowerCase().includes(this.searchText.toLowerCase()) ||
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      )
    },
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const clientHeight = document.documentElement.clientHeight
      const scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + clientHeight >= scrollHeight - 50 && !this.loading && !this.noMore) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.noMore || this.loading) return
      this.loading = true
      this.error = null
      setTimeout(() => {
        try {
          const newItems = Array.from({ length: this.pageSize }, (_, i) => ({
            id: this.items.length + i + 1,
            content: `HXD1 ${this.items.length + i + 1}`,
            name: ` ${this.items.length + i + 1}`,
            selected: false,
            showMenu: false,
            selectedOption: null,
            status: i % 2 === 0 ? 'active' : 'inactive'
          }))
          this.items = [...this.items, ...newItems]
          this.filteredItems = this.searchText ? this.items.filter(item =>
            item.content.toLowerCase().includes(this.searchText.toLowerCase()) ||
            item.name.toLowerCase().includes(this.searchText.toLowerCase())
          ) : [...this.items]
          this.page++
        } catch (err) {
          this.error = '加载数据时发生错误，请稍后再试。'
        } finally {
          this.loading = false
        }
      }, 1000)
    },
    toggleExpand(item) {
      item.showMenu = !item.showMenu
    },
    selectOption(item, option) {
      item.selectedOption = option.label
      item.showMenu = false
    },
    getColorByStatus(status) {
      const statusColors = {
        active: 'lightgreen',
        inactive: 'lightcoral'
      }
      return statusColors[status] || 'transparent'
    }
  }
}
</script>
<style scoped>
.box-card {
  max-width: 800px; /* 稍微增加最大宽度 */
  margin: 20px auto;
  padding: 30px; /* 增加内边距 */
  box-shadow: 0 4px 24px rgba(0,0,0,0.1); /* 更深的阴影效果 */
  border-radius: 8px; /* 更大的圆角 */
  background-color: #ffffff; /* 更亮的背景颜色 */
}

.search-input {
  margin-bottom: 30px; /* 增加底部边距 */
  width: 100%;
  border: 1px solid #dcdfe6; /* 添加边框 */
  border-radius: 4px; /* 圆角边框 */
}

.collapse-item {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s; /* 添加阴影过渡效果 */
}

.collapse-item.selected {
  background-color: #f5f7fa;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.1); /* 添加内阴影效果 */
}

.item-title {
  font-weight: bold;
  font-size: 16px; /* 增加字体大小 */
}

.item-content {
  padding: 15px 0;
  cursor: pointer;
}

.clickable-content {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 6px;
  background-color: #f5f7fa;
  transition: background-color 0.3s, transform 0.3s; /* 添加变换过渡效果 */
  font-size: 14px; /* 增加字体大小 */
}

.clickable-content:hover {
  background-color: #e4e7ed;
  transform: translateY(-3px); /* 鼠标悬停时轻微上移 */
}

.loading, .error {
  margin: 30px 0;
  text-align: center;
  font-size: 18px; /* 增加字体大小 */
}

.error {
  color: #f56c6c;
}

.load-more-btn {
  display: block;
  margin: 30px auto;
  width: 200px; /* 增加按钮宽度 */
  padding: 10px 20px; /* 增加内边距 */
  font-size: 16px; /* 增加字体大小 */
  border-radius: 6px; /* 圆角按钮 */
}

.item-list {
  list-style: none; /* 移除默认的列表样式 */
  padding: 0; /* 移除默认的内边距 */
}

.list-item {
  padding: 10px;
  cursor: pointer; /* 添加指针样式，表明这是一个可点击的元素 */
  border-bottom: 1px solid #e4e7ed; /* 添加分隔线 */
}

.list-item:last-child {
  border-bottom: none; /* 移除最后一个元素的底部边框 */
}

.list-item:hover {
  background-color: #f5f7fa; /* 鼠标悬停时的背景颜色 */
}

</style>
